<template>
  <el-dialog
    :title="!dataForm.id ? '新增' : '修改'"
    :close-on-click-modal="false"
    :visible.sync="visible"
  >
    <el-form
      :model="dataForm"
      :rules="dataRule"
      ref="dataForm"
      @keyup.enter.native="dataFormSubmit()"
      label-width="80px"
    >
      <el-row>
        <el-col :span="10">
          <el-form-item label="放映厅名称" prop="name">
            <el-input
              v-model="dataForm.name"
              placeholder="放映厅名称"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="5">
          <el-form-item label="行" prop="hrow">
            <el-input v-model="dataForm.hrow" placeholder="行"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="列" prop="hline">
            <el-input v-model="dataForm.hline" placeholder="列"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          &nbsp;&nbsp;
          <el-button  type="primary" @click="createRL()"
            >生成座位</el-button
          >
        </el-col>
        <el-col :span="5">
          &nbsp;&nbsp;
          <el-button type="primary" @click="changeColorSeat()"
            >全选/全不选</el-button
          >
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-form-item label="座位信息" prop="sit">
            <div v-for="(item, index) in list" :key="index">
              <img
                v-for="(i, num) in item"
                :key="num"
                :src="
                  i
                    ? 'src/views/modules/img/image1.png'
                    : 'src/views/modules/img/image0.png'
                "
                class="normal"
                style="left: 0 px; top: 0 px; width: 29px; height: 29px"
                @click="changeColor(index, num)"
              />
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="状态" prop="status">
        <el-switch
          style="display: block"
          v-model="dataForm.status"
          active-color="#13ce66"
          inactive-color="#ff4949"
          active-text="活跃"
          inactive-text="禁用"
          :active-value="0"
          :inactive-value="1"
        >
        </el-switch>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      //座位信息
      isAppend: false,
      colorVar: false,
      img: "../img/image0.png",
      r: "",
      c: "",
      list: "",
      visible: false,
      dataForm: {
        id: 0,
        createTime: "",
        deleted: "",
        hline: "",
        hrow: "",
        name: "",
        sit: "",
        status: "",
        userId: "",
      },
      dataRule: {
        createTime: [
          { required: true, message: "电影开始时间不能为空", trigger: "blur" },
        ],
        hline: [{ required: true, message: "列不能为空", trigger: "blur" }],
        hrow: [{ required: true, message: "行不能为空", trigger: "blur" }],
        name: [
          { required: true, message: "放映厅名称不能为空", trigger: "blur" },
        ],
        sit: [{ required: true, message: "座位信息不能为空", trigger: "blur" }],
      },
    };
  },
  methods: {
    changeColorSeat() {
      if(!this.isAppend){
        return ;
      }
         console.log("一开始",this.list.length);
      this.colorVar=!this.colorVar;
      let r = this.dataForm.hrow;
      let c = this.dataForm.hline;
      if(this.colorVar){
        for (var i = 0; i < r; i++) {
          for (var j = 0; j < c; j++) {
                      console.log(this.list.length);
      this.$set(this.list[i], j, true);
          }
      }
         
        
        }else{
          for (var i = 0; i < r; i++) {
          for (var j = 0; j < c; j++) {
                      console.log(this.list.length);

      this.$set(this.list[i], j, false);
          }
      }
      }
    },
    createRL() {
      this.list = [];
      let r = this.dataForm.hrow;
      let c = this.dataForm.hline;
      if (r && c) {
        for (var i = 0; i < r; i++) {
          var temp = [];
          for (var j = 0; j < c; j++) {
            temp.push(false);
          }
          this.list.push(temp);
            console.log("创建",this.list.length);
        }
      } else {
        this.$message.error("请输入行跟列");
      }
      if(this.list.length==0){
              this.isAppend=false;
              return;
      }
      this.isAppend=true;
    },
    changeColor(row, col) {
      this.$set(this.list[row], col, !this.list[row][col]);

      console.log(this, this.list);
    },
    init(id) {
      this.list = [];
      this.dataForm.id = id || 0;
      this.visible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].resetFields();
        if (this.dataForm.id) {
          this.$http({
            url: this.$http.adornUrl(`/cb/hall/info/${this.dataForm.id}`),
            method: "get",
            params: this.$http.adornParams(),
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.dataForm.createTime = data.hall.createTime;
              this.dataForm.deleted = data.hall.deleted;
              this.dataForm.hline = data.hall.hline;
              this.dataForm.hrow = data.hall.hrow;
              this.dataForm.name = data.hall.name;
              this.dataForm.sit = data.hall.sit;
              this.dataForm.status = data.hall.status;
              this.dataForm.userId = data.hall.userId;
              
              var cs=JSON.parse(this.dataForm.sit)
                   this.list = [];
          let r = this.dataForm.hrow;
      let c = this.dataForm.hline;
     
        for (var i = 0; i < r; i++) {
          var temp = [];
          for (var j = 0; j < c; j++) {
            temp.push(false);
          }
          this.list.push(temp);
          console.log(this.list);
        }
              cs.forEach(element => {
                var p=element.split(",");
                console.log(p)
                this.$set(this.list[p[0]],p[1],true);
              });
              console.log(c)
            }
          });
        }
      });
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          var loca = [];
          for (var i = 0; i < this.list.length; i++) {
            for (var j = 0; j < this.list[0].length; j++) {
              loca.push(i + "," + j);
            }
          }
          this.$http({
            url: this.$http.adornUrl(
              `/cb/hall/${!this.dataForm.id ? "save" : "update"}`
            ),
            method: "post",
            data: this.$http.adornData({
              id: this.dataForm.id || undefined,
              hline: this.dataForm.hline,
              hrow: this.dataForm.hrow,
              name: this.dataForm.name,
              sit: JSON.stringify(loca),
              status: this.dataForm.status,
            }),
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "操作成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.visible = false;
                  this.$emit("refreshDataList");
                },
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        }
      });
    },
  },
};
</script>
<style scoped>
#room {
  /* width: 300px; */
  width: 60%;
  border: 1px solid black;
  padding: 20px 20px 20px 20px;
}

.sit {
  height: 35px;
  width: 35px;
  min-height: 10px;
  min-width: 10px;
  margin: 4px 4px 4px 4px;
  background-size: cover;
  /* border: 1px solid black; */
}

/* 座位 */
.bg-sit {
  background-image: url("/images/bg-sit.png");
}

.bg-sit:hover {
  cursor: pointer;
}

/* 已售座位 */
.bg-sited {
  /* background-color: red; */
  background-image: url("/images/bg-sited.png");
}

/* 空位置 */
.bg-nosit {
  /* border: 1px solid white; */
}

/* 已选座位 */
.bg-temp {
  cursor: pointer;
  background-image: url("/images/bg-temp.png");
}

/* 已选座位号 */
.select-sit {
  border: 2px orange solid;
  border-radius: 10px;
  margin-left: 10px;
  padding: 4px 10px 4px 10px;
  background-color: rgba(255, 0, 0, 0.2);
}

.row {
  /* 清除格式并换行 */
  clear: both;
}

/* 确认选座按钮 */
.btn {
  border-radius: 10px;
  width: 200px;
  height: 50px;
  /* padding: 4px 10px 4px 10px; */
  background-color: rgba(255, 0, 0, 0.8);
  font-size: 25px;
  color: white;
  font-family: "微软雅黑";
}

/* 右侧信息栏 */
.win-right {
  padding-left: 2%;
  padding-top: 2%;
  width: 27%;
  background-color: rgba(112, 112, 112, 0.2);
  border: 1px white solid;
  height: 100%;
}

/* 整体容器 */
.box {
  width: 90%;
  margin-left: 5%;
  height: 64%;
}

/* 电影封面 */
.film-img {
  width: 80%;
}

/* 电影名 */
.film-title {
  font-family: "微软雅黑";
  font-weight: 900;
  font-size: 25px;
}
.normal {
  position: relative;
  /* margin: 10rpx; */
  width: 100%;
  height: 100%;
}
</style>